<template>
    <!-- 购物车组件的容器 -->
    <div class="shoppingCart">
        <!-- 使用Element UI的卡片组件展示购物车内容 -->
        <el-card class="shopping_card">
            <!-- 购物车标题，包含购物车文字和购物车图标 -->
            <div class="title">
                <span>购物车</span>
                <i class="el-icon-shopping-cart-full"></i>
            </div>
            <!-- 使用Element UI的表格组件展示购物车中的商品列表 -->
            <el-table class="shopping_table" 
                :data="cart" 
                border 
                style="width: 100%" 
                @selection-change="selectChange">
                <!-- 选择列，允许用户选择商品 -->
                <el-table-column type="selection" label="全部" width="80" align="center"></el-table-column>
                <!-- 商品图片列，展示商品图片 -->
                <el-table-column prop="cover" label="商品" width="width" align="center">
                    <template slot-scope="{row,$index}">
                        <img :src="row.cover" alt="图片加载错误" class="cover">
                    </template>
                </el-table-column>
                <!-- 商品单价列 -->
                <el-table-column prop="price" label="单价（元）" width="width" align="center"></el-table-column>
                <!-- 商品数量列，包含数量显示和增减按钮 -->
                <el-table-column prop="number" label="数量" width="width" align="center">
                    <template slot-scope="{row,$index}">
                        <el-button plain icon="el-icon-minus" @click="subNumber(row)" size="mini"></el-button>
                        <span class="number">{{row.number}}</span>
                        <el-button plain icon="el-icon-plus" @click="addNumber(row)" size="mini"></el-button>
                    </template>
                </el-table-column>
                <!-- 商品小计列，显示商品的总价 -->
                <el-table-column prop="prop" label="小计（元）" width="width" align="center">
                    <template slot-scope="{row,$index}">
                        {{row.number * row.price}}
                    </template>
                </el-table-column>
                <!-- 操作列，包含查看详情和删除按钮 -->
                <el-table-column prop="date" label="操作" width="width" align="center">
                    <template slot-scope="{row,$index}">
                        <el-button type="success" @click="detail(row)">详情</el-button>
                        <el-tooltip effect="light" content="删除商品" placement="right">
                            <el-button type="danger" icon="el-icon-delete" @click="deleteBook(row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 底部信息，显示已选择商品数量和总价，以及结算按钮 -->
            <div class="bottom">
                <span class="tips">已选择{{selectNumber}}件商品&nbsp;&nbsp;&nbsp;共计：{{total}}元</span>
                <el-button type="success" plain @click="pay">结算</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
    import { mapState } from "vuex"; // 导入Vuex的mapState辅助函数

    export default {
        name: 'ShoppingCart', // 组件名称
        data() {
            return {
                // 组件的局部状态
                selectNumber: 0, // 已选择的商品数量
                total: 0, // 总价
                selectBook: [] // 已选择的商品数组
            }
        },
        computed: {
            // 计算属性，从Vuex的state映射到组件的计算属性
            ...mapState({
                cart: (state) => state.cart, // 映射购物车数据
            }),
        },
        methods: {
            // 组件的方法
            selectChange(selection) {
                // 当用户选择商品时触发，更新已选择商品数组和数量、总价
                this.selectBook = selection;
                this.selectNumber = selection.length;
                let total = 0;
                selection.forEach(item => {
                    total += item.number * item.price;
                });
                this.total = total;
            },
            deleteBook(book) {
                // 删除购物车中的商品
                this.$store.commit('DELETE', book);
            },
            detail(book) {
                // 查看商品详情
                this.$router.push('/book');
                this.$store.commit('DETAIL', book);
            },
            addNumber(book) {
                // 增加商品数量
                this.$store.commit('ADD', book);
            },
            subNumber(book) {
                // 减少商品数量，如果数量为1则删除商品
                if (book.number == 1) {
                    this.deleteBook(book);
                } else {
                    this.$store.commit('SUB', book);
                }
            },
            pay() {
                // 结算操作，提交已选择的商品到Vuex，并提示用户支付成功
                this.$store.commit('PAY', this.selectBook);
                this.$message({
                    type: 'success',
                    message: '结算成功！共支付' + this.total + '元'
                });
            }
        }
    }
</script>

<style scoped>
    .shoppingCart {
        display: flex;
        justify-content: center;
        text-align: center;
        background-color: #eee;
    }

    .shopping_card {
        margin: 30px 0px;
        width: 1000px;
    }

    .title {
        font-size: 20px;
        font-weight: 600;
        padding-left: 10px;
        padding-bottom: 10px;
        text-align: left;
    }

    .cover {
        width: 100px;
        height: 100px;
    }

    .number {
        padding: 0px 10px;
    }

    .bottom {
        margin-top: 20px;
        text-align: right;
    }

    .tips {
        font-size: 16px;
        padding-right: 20px;
    }
</style>